<template>
  <el-dialog 
    :title="dialogStatus" 
    :visible.sync="dialogFormVisible" 
    :close-on-click-modal="false" 
    width="60%">
    <el-form 
      label-position="right" 
      label-width="120px" 
      style="width: 100%;">

      <el-form-item :label="$t('product.name')" >
        <span>{{ Form.product.name }}</span>
      </el-form-item>
      <el-form-item :label="$t('product.productType')" >
        <span>{{ Form.product.productType }}</span>
      </el-form-item>
      <el-form-item :label="$t('product.productCategory')" >
        <span>{{ Form.product.productCategory }}</span>
      </el-form-item>

      <el-form-item 
        v-if="Form.product.productCategory!='私募股权'" 
        label="产品进度">
        <span>{{ Form.product.per+'%' }}</span>
      </el-form-item>

      <el-form-item 
        v-if="Form.product.productCategory!='私募股权'" 
        :label="$t('product.clTime')">
        <span>{{ Form.product.clTime }}</span>
      </el-form-item>
      <el-form-item 
        v-if="Form.product.productCategory!='私募股权'" 
        :label="$t('product.endTime')">
        <span>{{ Form.product.endTime }}</span>
      </el-form-item>

      <el-form-item :label="$t('order.status')" >
        <span>{{ Form.order.status|orderStatus }}</span>
      </el-form-item>

      <el-form-item :label="$t('order.prices')" >
        <span>{{ Form.order.prices/100000+'wan元' }}</span>
      </el-form-item>

      <el-form-item label="开户行" >
        <span>{{ Form.order.openBank }}</span>
      </el-form-item>

      <el-form-item :label="$t('order.bankcard')">｀
        <el-row>
          <el-col :span="12">
            <img 
              :src="Form.order.bankcard1" 
              :preview-text="$t('order.bankcard1')" 
              preview="1" 
              style="width: 200px;height: 150px">
          </el-col>
          <el-col 
            v-if="Form.order.bankcard2!=''" 
            :span="12">
            <img 
              :src="Form.order.bankcard2" 
              :preview-text="$t('order.bankcard2')" 
              preview="1" 
              style="width: 200px;height: 150px">
          </el-col>
        </el-row>
      </el-form-item>

      <el-form-item :label="$t('order.payment')">
        <el-row>
          <el-col 
            v-for="(item,index) in Form.order.payment" 
            :span="12" >
            <img 
              :src="item" 
              :preview-text="$t('order.payment')" 
              preview="2" 
              style="width: 200px;height: 150px">
          </el-col>
        </el-row>
      </el-form-item>

      <el-form-item :label="$t('consumer.name')" >
        <span>{{ Form.consumer.name }}</span>
      </el-form-item>

      <el-form-item :label="$t('consumer.phone')" >
        <span>{{ Form.consumer.phone }}</span>
      </el-form-item>

      <el-form-item :label="$t('consumer.idcardBack')">
        <el-row>
          <el-col :span="12">
            <img 
              :src="Form.consumer.idcardBack1" 
              :preview-text="$t('consumer.idcardBack1')" 
              preview="3" 
              style="width: 200px;height: 150px">
          </el-col>
          <el-col :span="12">
            <img 
              :src="Form.consumer.idcardBack2" 
              :preview-text="$t('consumer.idcardBack2')" 
              preview="3" 
              style="width: 200px;height: 150px">
          </el-col>
        </el-row>
      </el-form-item>

      <el-form-item :label="$t('user.nickname')" >
        <span>{{ Form.user.nickname }}</span>
      </el-form-item>
      <el-form-item :label="$t('user.userType')" >
        <el-row>
          <el-col :span="7">
            <span>{{ Form.user.userType| userType }}</span>
          </el-col>
          <el-col 
            v-if="Form.user.userType==2" 
            :span="9">
            <span>{{ '所属理财师:'+Form.user.fnickname }}</span>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item :label="$t('user.mobile')" >
        <span>{{ Form.user.mobile }}</span>
      </el-form-item>

    </el-form>
  </el-dialog>
</template>

<script>

import { fetch } from '@/api/order'
import ProgressBar from '@/components/Progress'

const orderStatus = {
  1:'待审核',
  2:'已审核',
};
const userType = {
  1:'金牌理财师',
  2:'银牌理财师',
};
export default {
  name: 'Orderform',
  components: {
    ProgressBar
  },
  filters:{
    orderStatus:function (status) {
      return orderStatus[status];
    },
    userType:function (status) {
      return userType[status];
    }
  },
  data() {
    return {
      dialogStatus: '',
      addLoading: false,
      dialogFormVisible: false,
      Form: {
        product: {
          name: '天赋-天赋生态环境1号私募投资基金',
          productType: '天赋集团',
          productCategory: '基金',
          clTime: '2010-09-01 09:01:00',
          endTime: '2010-09-01 10:01:00',
          per:''
        },
        order: {
          status: 2,
          prices: 9999,
          openBank: '',
          bankcard1: 'http://img.tqcaifu.com/01521525089.png',
          bankcard2: 'http://img.tqcaifu.com/01521525089.png',
          payment: ['http://img.tqcaifu.com/01521525089.png',
            'http://img.tqcaifu.com/01521525089.png',
            'http://img.tqcaifu.com/01521525089.png'
          ]
        },
        consumer: {
          name: '王大崔',
          phone: '13576536471',
          idcardBack1: 'http://img.tqcaifu.com/01521525089.png',
          idcardBack2: 'http://img.tqcaifu.com/01521525089.png'
        },
        user: {
          userType: 2,
          nickname: '李刚',
          mobile: '135495817234',
          fnickname: 'xxx',
        }
      }
    }
  },
  methods: {
    formShow: function($row, $option, $type = 0) {
      this.dialogFormVisible = true
      // 编辑
      if ($type == 0) {
        this.Form = $row
        this.dialogStatus = '编辑-' + $option
      } else if ($type == 1) {
        this.Form.productCategory = $option
        this.dialogStatus = '添加-' + $option
      } else {
        this.dialogStatus = '详情'
      }

      fetch($row).then(res=>{
          if(res.data.code==1){
            this.Form = res.data.data;
          }else{
            this.$message({
              showClose: true,
              message: '获取数据失败',
              type: 'error'
            })
          }
        }
      ).catch(()=>{
        this.$message({
          showClose: true,
          message: '网络请求失败',
          type: 'error'
        })
      });
    },
  }
}
</script>

<style scoped>
  .scheduleInput{
    margin-bottom: 10px;
    margin-right: 30px;
  }
</style>

<style>
  .pswp--supports-fs{
    z-index: 9000;
  }
</style>
